
<template>
  <div>
    <!-- 客户编辑dialog-->
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="editVisible"
    >
      <el-form
        label-width="122px"
        ref="editForm"
        :model="editForm"
      >

        <el-form-item label="客户名称:" prop="companyName" :rules="[
                  {required: true, message:'请选择客户', trigger:'change'}
                 ]">
          <el-input class="selectInput" v-model="editForm.companyName" @focus="getCompanyClient" placeholder="请选择客户">
<!--             <template slot="append"><span @click="getCompanyClient">选择</span></template>-->
          </el-input>
        </el-form-item>
        <el-form-item label="产品名称:" prop="productName" :rules="[
                  {required: true, message:'请选择产品', trigger:'change'}
                 ]">
          <el-input class="selectInput" v-model="editForm.productName" @focus="getProductClient" placeholder="请选择产品">
<!--            <template slot="append"><span @click="getProductClient">选择</span></template>-->
          </el-input>
        </el-form-item>
        <el-form-item label="信用量(吨):" prop="creditQuatity" :rules="[
                  {required: true, message:'请输入信用量', trigger:'blur'},
                  {validator: validator.isTwoFloat, trigger:'blur'}
                 ]">
          <el-input v-model="editForm.creditQuatity" v-thousands.creditQuatity="editForm"  placeholder="填写数量，2位小数"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footer-input">
          <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
          >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>

        </div>

      </span>
    </el-dialog>
    <!--产品选择弹窗-->
    <ProductDialog ref="ProductDialog" @getProductData="getProductData">

    </ProductDialog>
    <!--客户选择弹窗-->
    <CompanyDialog ref="CompanyDialog" @getCompanyData="getCompanyData">

    </CompanyDialog>
  </div>
</template>
<script>
import { getList } from '@/api/market/crm.js'
import { edit } from '@/api/market/companyProductCredit.js'
import ProductDialog from '@/components/dialog/productDialog.vue'
import CompanyDialog from '@/components/dialog/companyDialog.vue'
export default {
  components: {
    ProductDialog,
    CompanyDialog
  },
  data () {
    return {
      areaLabel: {},
      method: '',
      title: '',
      editForm: {
        companyId: '',
        companyName: '',
        productId: '',
        productName: '',
        creditQuatity: '',
        creditMoney: '',
        businessSurplusQuatity: '',
        businessSurplusMoney: '',
        id: ''
      },
      editVisible: false,
      detailsVisible: false,
      dataRule: {
        contactName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
        // productName: [
        //   { required: true, message: '请选择产品类型', trigger: 'change' }
        // ],

      },
      tableData1: [],
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      props: 1,
      dialogVisible: false,
      query: ''
    }
  },
  methods: {
  	handleClose(done) {
				this.$Msg.confirm({
					title:'您确定要关闭吗？',
					content:this.GLOBAL.FORM_CLOSE_TIPS,
					confirmCall:()=>{
						done();
					}
				})
			},
    select (e) {
      this.editForm.companyName = e.names
      this.editForm.companyId = e.id
      this.dialogVisible = false
      console.log(e)
    },
    onlyNumber (rule, value, callback) {
      if (value && !(/^[1-9]\d*$/).test(value)) {
        callback(new Error('只能填写正整数'))
      } else {
        callback()
      }
    },
    // 客户选择弹窗
    getCompanyClient () {
      this.$refs['CompanyDialog'].dialogVisible = true
      this.$refs['CompanyDialog'].getCompanyList({pageSize: 10,pageNo: 1})
    },
    // 客户选择数据回显
    getCompanyData (row) {
      this.editForm.companyName = row.names
      this.editForm.companyId = row.id
      this.dialogVisible = false
      console.log(row)
    },
    // 产品选择弹窗
    getProductClient () {
      this.$refs['ProductDialog'].dialogVisible = true
    },
    getProductData (row) {
      this.editForm.productName = row.name
      this.editForm.productId = row.id
      this.dialogVisible = false
      console.log(row)
    },
    // 获取列表带分页
    getList (params, props, orderName, orderByAORC, queryNames, queryState) {
      this.loading = true
      getList({
        pageSize: params.pageSize,
        pageNo: params.pageNo,
        props: props,
        orderBy: orderName,
        orderByAORC: orderByAORC,
        names: queryNames,
        state: queryState
      }).then((res) => {
        if (res.data.code === '200') {
          console.log(res.data.result.list)
          this.tableData1 = res.data.result.list
          this.page.total = res.data.result.count
        }
        this.loading = false
      })
    },
    init (method, editForm) {
      if (method === 'add') {
        this.editVisible = true
        this.$nextTick(() => {
          this.$refs.editForm.resetFields()
        })
        this.editForm.companyName = ''
        this.editForm.companyId = ''
        this.editForm.productId = ''
        this.editForm.productName = ''
        this.editForm.creditQuatity = ''
        this.editForm.creditMoney = ''
        this.editForm.businessSurplusQuatity = ''
        this.editForm.businessSurplusMoney = ''
        this.editForm.id = ''
        this.title = '新增客户信用量'
      } else if (method === 'edit') {
        this.editVisible = true
        this.method = method
        console.log(editForm.countyCode)
        this.$nextTick(() => {
          this.$refs.editForm.resetFields()
          this.editForm = editForm
        })

        this.title = '修改客户信用量'
      }
    },
    getArea1 (e) {
      if (e.province !== '' && e.city !== '' && e.district !== '') {
        this.editForm.countyCode = JSON.stringify(e)
      } else {
        this.editForm.countyCode = ''
      }
    },
    close () {
      this.editVisible = false
    },
    doSubmit () {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          edit(this.editForm).then((res) => {
            if (res.data.code === '200') {
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.editVisible = false
              this.$emit('refreshDataList')
            }
          })
        }
      })
    }
  },
  mounted () {
    this.getList(this.page, 1)
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog{
  .el-form{
    .el-input__inner{
      width: 320px;
    }
    .inputAppend-wrapper{
      .el-input__inner{
        width: 282px;
      }
    }
  }
}
</style>
